<template>
  <div class="app-container">
    <div class="flex">
      <div>所属合同</div>
      <div>
        <el-select
            :disabled='search.checked'
            v-model="search.checked ? 0 : search.name"
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :remote-method="remoteMethod"
            :loading="loading"
            @focus="focus"
            @change="change1"
            >
            <!-- :label="item.id +'-'+ item.contract_num +'-'+ item.title" -->
            <el-option
              v-for="item in options1"
              :key="item.id"
              :label="'编号:'+item.contract_num+'('+'标题:'+item.title+')'+'('+'id:'+item.id+')' "
              :value="item.contract_num">
            </el-option>
          </el-select>
      </div>
      <div>
        <el-checkbox v-model="search.checked">无合同</el-checkbox>
      </div>
    </div>
    <el-card class="box-card" v-for="item in list" :key="item.id">
      <table
        style="border: 1px solid #ccc"
        cellspacing="0"
        cellpadding="10"
        width="100%"
      >
        <tr>
          <td>id</td>
          <td>项目名称</td>
          <td>委托单位</td>
          <td>建设位置</td>
          <td>工程名称</td>
          <td>业务类型</td>
          <td>市场负责人</td>
          <td>配合市场人</td>
          <td>备注</td>
        </tr>
        <tr>
          <td>{{ item.id }}</td>
          <td>{{ item.item_name }}</td>
          <td>{{ item.entrust_unit }}</td>
          <td>{{ item.build_position }}</td>
          <td>{{ item.archives_name }}</td>
          <td>
            <div v-for="prop in item.bus" :key="prop.id">
              {{ prop.bus_name }}：{{ prop.source_load }}
              {{ "(" + prop.unit + ")" }}
            </div>
          </td>
          <td>{{ item.market_person_uid_str }}</td>
          <td>{{ item.market_person_b_uid_str }}</td>
          <td>{{ item.remark }}</td>
        </tr>
      </table>

      <!-- <el-table-column label="id" align="center" width="60">
          <template>
            <span>{{ item.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="项目名称" align="center">
          <template>
            <span>{{ item.item_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="委托单位" align="center">
          <template>
            <span>{{ item.entrust_unit }}</span>
          </template>
        </el-table-column>
        <el-table-column label="建设位置" align="center">
          <template>
            <span>{{ item.build_position }}</span>
          </template>
        </el-table-column>
        <el-table-column label="工程名称" align="center">
          <template>
            <span>{{ item.archives_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="业务类型" align="center">
          <template>

            <div v-for="prop in item.bus" :key="prop.id">
              {{ prop.bus_name }}：{{ prop.source_load }}
              {{ "(" + prop.unit + ")" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="市场负责人" align="center" width="110">
          <template>
            <span>{{ item.market_person_uid_str }}</span>
          </template>
        </el-table-column>
        <el-table-column label="配合市场人" align="center" width="100">
          <template>
            <span>{{ item.market_person_b_uid_str }}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center">
          <template>
            <span>{{ item.remark }}</span>
          </template>
        </el-table-column> -->
    </el-card>

    <div class="button-center">
      <el-tooltip
        class="item"
        effect="dark"
        content="生成准结算单后,后期可以再次向这个结算单合同里添加其他项目,直至合同项目完工"
        placement="top"
      >
        <el-button
          @click="upload(1)"
          :loading="loading"
          v-show="!search.checked"
          style="backgroundColor:#42b983;color:#fff"
        >
          生成准结算单
        </el-button>
      </el-tooltip>
      <el-tooltip
        class="item"
        effect="dark"
        content="生成最终结算单后,结算单里的项目就固定了,无法再次向同一个结算单里增减项目"
        placement="top"
      >
        <el-button @click="upload(3)" :loading="loading" type="primary">
          生成最终结算单
        </el-button>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
import {
  req_nojie_suan_list,
  add_jie_suan_dan,
} from "@/api/jiesuan/xiang_mu/nojiesuan.js";
import { get_contract } from "@/api/jiesuan/item/hook.js";
export default {
  data() {
    return {
      name:'',
      loading: false,
      search: {
        name: "",
        checked: false,
      },
      list: [],
      options1:[]
    };
  },
  created() {
    this.get_list();
  },
  mounted() {
    if (this.search.name == "") {
      this.search.checked == true;
    } else {
      this.search.checked == false;
    }
  },
  methods: {
    remoteMethod(e){
      if (e !== "") {
        this.loading = true;
        get_contract({ keyword: e }).then((res) => {
          this.loading = false;
          this.options1 = res.data;
        });
      } else {
        this.options1 = [];
      }
    },
    change1(e){
      console.log(e)
      this.name = e
    },
    focus(){
      get_contract({ keyword: '' }).then((res) => {
        this.loading = false;
        this.options1 = res.data;
        console.log(this.options1)
      });
    },
    get_list() {
      req_nojie_suan_list({ ids: this.$route.query.id }).then((res) => {
        this.list = res.data;
      });
    },
    upload(type) {
      this.loading = true;
      if (!this.search.name && !this.search.checked) {
        this.$message({
          message: "请填写合同编号或者勾选无合同",
          type: "warning",
        });
        this.loading = false;
        return;
      }
      add_jie_suan_dan({
        type,
        contract_num: this.search.checked ? 0 : this.name,
        item_ids: this.$route.query.id,
      })
        .then((res) => {
          this.$message({
            message: res.msg,
            type: "success",
          });
          this.loading = false;
          this.$store.state.tagsView.visitedViews =
            this.$store.state.tagsView.visitedViews.filter((item) => {
              if (this.$route.fullPath === item.fullPath) {
                return false;
              } else {
                return true;
              }
            });
          this.$router.back();
        })
        .catch((err) => {
          this.loading = false;
        });
    },
  },
};
</script>

<style scoped="scoped">
.box-card {
  margin-top: 20px;
}
.button-center {
  margin-left: 20px;
  margin-top: 20px;
  text-align: center;
}
.nav {
  padding: 20px;
}
.border {
  margin-bottom: 20px;
  /* height: 400px; */
}
.app-container {
  padding: 20px;
}
.flex_y {
  display: flex;
  align-items: center;
}
.flex_y > div {
  margin-right: 20px;
  margin-bottom: 20px;
}
.flex {
  display: flex;
  align-items: center;
  /* justify-content: center; */
}
.flex > div {
  margin-left: 20px;
  margin-bottom: 20px;
  /* font-size: 12px; */
}
table {
  border-collapse: collapse;
}
td {
  text-align: center;
  border: 0.5px solid #dfe6ec;
}
</style>
